<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      body {
         perspective: 1000px;
      }

      .box {
         position: relative;
         margin: 250px auto;
         width: 300px;
         height: 200px;
         transform-style: preserve-3d;
         animation: rotate 10s linear infinite;
         background: url();
      }
      @keyframes rotate {
         0% {
            transform: rotateY(0);
         }
         100% {
            transform: rotateY(360deg);
         }
      }

      .box div {
         position: absolute;
         width: 100%;
         height: 100%;
         background: url(imgaes/dog.jpg) no-repeat;
      }

      .box .box1 {
         transform: rotatey(0) translateZ(300px);
      }

      .box .box2 {
         transform: rotatey(60deg) translateZ(300px);
      }

      .box .box3 {
         transform: rotatey(120deg) translateZ(300px);
      }

      .box .box4 {
         transform: rotatey(180deg) translateZ(300px);
      }

      .box .box5 {
         transform: rotatey(240deg) translateZ(300px);
      }

      .box .box6 {
         transform: rotatey(300deg) translateZ(300px);
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
      <div class="box6"></div>
   </div>
</body>

</html>